import React, { useEffect, useState } from 'react'
import { getStuListApi } from '../api/stuApi'
import { useLocation,useNavigate } from 'react-router-dom'

export default function Home() {
  const [stuList, setStuList] = useState([])
  const [searchItem, setSearchItem] = useState([])
  const location = useLocation()
  const navigate = useNavigate()

  useEffect(() => {
    getStuListApi().then(res => {
      setStuList(res)
    })
  }, [])
  useEffect(()=>{
    //state获取参数
    // console.log(location)
    // console.log(location.state?.a)
  },[location])

  function changeHandle(){

  }
  function goDetail(item) {
    navigate("/detail?id="+item.id+'&name='+item.name);
  }
  const trs = stuList.map((item,index)=>{
    return (
      <tr key={index}>
        <td>{item.name}</td>
        <td>{item.age}</td>
        <td>{item.phone}</td>
        <td><div onClick={()=>goDetail(item)}>详情</div></td>
      </tr>
    )
  })

  return (
    <div>
      <h1>学生列表</h1>
      <input type="text"
        placeholder='搜索'
        className="form-control"
        value={searchItem}
        onChange={changeHandle} />
      <table className='table table-striped table-bordered'>
        <thead>
          <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>联系方式</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          {trs}
        </tbody>
      </table>
    </div>
  )
}
